<script lang="ts" setup>
import { computed, reactive, ref, watch } from "vue";
import { PayInfoApi } from "@/Api";
import { AxiosResponse } from "axios";

interface Props {
   modelValue: boolean;
   search: PaginationSearch<PayInfo.Search>;
}

const props = withDefaults(defineProps<Props>(), {
   modelValue: false
});

const emit = defineEmits<{
   (e: "update:modelValue", value: boolean): void;
}>();

const dialogVisible = computed({
   get: () => props.modelValue,
   set: value => emit("update:modelValue", value)
});
const search = computed(() => props.search);
const loading = reactive({ submit: false, content: false });
const disable = reactive({ submit: false });
const checkList = ref<string[]>([]);
const exportCol = ref<PayInfo.ExportColResult[]>([]);

async function getExportCol() {
   loading.content = true;
   disable.submit = true;

   try {
      const { code, data } = await PayInfoApi.ExportCol();
      if (code === 200) {
         exportCol.value = data;

         data.forEach(item => {
            if (item.default) checkList.value[item.sequence] = item.code;
         });
      }
   } catch (error) {
      console.log("error", error);
   }

   loading.content = false;
   disable.submit = false;
}

async function handlerClick() {
   try {
      const params = {
         ...search.value,
         title: [...checkList.value]
      };

      const data = (<unknown>await PayInfoApi.Export(params)) as AxiosResponse<any, any>;

      if (data.status == 200) {
         const file = data.data;
         const str = data.headers["content-disposition"] as string;
         const fileName = str.slice(str.indexOf("="));
         // const fileName = decodeURI(str.slice(str.lastIndexOf("=") * -1 + 2));

         const blob = new Blob([(<unknown>file) as Blob]);
         let elink = document.createElement("a");
         elink.download = "fileName.xlsx";
         elink.style.display = "none";
         elink.href = URL.createObjectURL(blob);
         document.body.appendChild(elink);
         elink.click();
         document.body.removeChild(elink);
         ElMessage.success("导出成功，正在下载");
      }
   } catch (error) {
      console.log("error", error);
   }
}

/** 恢复默认选择 */
function checkDefault() {
   const list: string[] = [];

   exportCol.value.forEach(item => {
      if (item.default) list.push(item.code);
   });

   checkList.value = list;
}

/** 选择全部 */
function checkAll() {
   const list: string[] = [];
   exportCol.value.forEach(item => list.push(item.code));
   checkList.value = list;
}

function handlerOpen() {
   getExportCol();
}

watch(
   checkList,
   value => {
      exportCol.value.forEach(item => {
         item.sequence = value.indexOf(item.code);
      });
   },
   { deep: true }
);
</script>

<template>
   <el-dialog
      v-model="dialogVisible"
      ref="dialog"
      title="根据当前查询结果导出数据"
      width="600px"
      draggable
      append-to-body
      @open="handlerOpen">
      <div class="dialogContent" v-loading="loading.content">
         <span class="prompt">
            <el-icon color="#E6A23C" size="22"><WarningFilled /></el-icon>
            导出结果将以选择顺序为准
         </span>

         <el-checkbox-group v-model="checkList">
            <template v-for="item in exportCol">
               <el-checkbox :label="item.code">
                  {{ item.label }}
                  <span class="sequence" v-if="item.sequence != -1">(第 {{ item.sequence + 1 }} 列)</span>
               </el-checkbox>
            </template>
         </el-checkbox-group>
      </div>

      <template #footer>
         <div class="footer">
            <div class="footerLeft">
               <el-button size="small" :disabled="disable.submit" @click="checkDefault"> 默认序列 </el-button>
               <el-button size="small" :disabled="disable.submit" @click="checkAll"> 选择全部 </el-button>
               <el-button size="small" :disabled="disable.submit" @click="checkList = []"> 全部取消 </el-button>
            </div>
            <el-button :loading="loading.submit" :disabled="disable.submit" type="primary" @click="handlerClick">
               导出
            </el-button>
         </div>
      </template>
   </el-dialog>
</template>

<style lang="scss" scoped>
.dialogContent {
   .prompt {
      padding-inline: 15px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      > .el-icon {
         margin-right: 10px;
      }
   }

   .el-checkbox-group {
      width: 100%;
      display: grid;
      // grid-template-columns: 25% 8% 25% 8% 25% 8%;
      grid-template-columns: 33.33% 33.33% 33.33%;
      padding-inline: 30px;
      box-sizing: border-box;

      &::v-deep(.el-checkbox) {
         margin-right: 10px;
      }

      &::v-deep(.el-checkbox__label) {
         flex: 1;
         display: flex;
         align-items: center;
         justify-content: space-between;

         .sequence {
            color: #000;
            opacity: 0.6;
         }
      }
   }
}

.footer {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
}
</style>
